import base from "../base.js";
import studentsApi from "../../api/students.js";
import Student from "./index.js";
// 更新学生
export default class extends base {
    constructor(props) {
        super(props)
        this._id = props._id;

    };
    handle() {

        this.el.on("click", ".btn", async e => {
            const data = await studentsApi.update(this.student)
            if (data.ok) {
                location.hash = "#/info/students-list"
            }
        })

        this.el.on("input", ".update-form input", e => {
            const ele = $(e.target)
            const key = ele.attr("name");
            this.student[key] = ele.val()
        })


    };
    async rerender() {



    }
    moutend() {
        this.rerender()
    }
    async render() {
        this.student = await studentsApi.getOne(this._id)

        const {
            age,
            city,
            email,
            name,
            sex,
            tel,
        } = this.student;
        const className = this.student.class.name
        this.el.html(
            `  
        <div>
           <h1>
         修改学生
           </h1>
           <table border="1" class="update-form">
           <tbody >
               <tr>
                   <th>姓名</th>
                   <th><input type="text" name="name" value="${name}"></th>
               </tr>
               <tr>
                   <th>年龄</th>
                   <th><input type="text" name="age" value="${age}"></th>
               </tr>
               <tr>
                   <th>性别</th>
                   <th><input type="text" name="sex" value="${sex}"></th>
               </tr>
               <tr>
                   <th>班级</th>
                   <th><input type="text" name="classId" value="${className}"></th>
               </tr>
               <tr>
                   <th>电话</th>
                   <th><input type="text" name="tel" value="${tel}"></th>
               </tr>
               <tr>
                   <th>邮箱</th>
                   <th><input type="text" name="email" value="${email}"></th>
               </tr>
               <tr>
                   <th>家庭地址</th>
                   <th><input type="text" name="city" value="${city}"></th>
               </tr>
           </tbody>
       </table>
       <div>
           <button class="btn">确认更新</button>
       </div>`);

        this.btn = $(".btn");
        this.inpueEle = $(".update-form input")

    };;
}